/// Author: Samle
import 'dart:convert';

import 'package:flutter/material.dart';

import 'Player.dart';

class WordsElement extends StatefulWidget {
  /// 传入参数
  const WordsElement({
    Key? key,
    required this.onPressed,
    required this.doublePressed,
    required this.longPressed,
    required this.onTap,
    required this.dataForm,
  }) : super(key: key,);
  final Map dataForm;
  final VoidCallback onPressed;
  final VoidCallback doublePressed;
  final VoidCallback longPressed;
  final VoidCallback onTap;
  @override
  State<StatefulWidget> createState() => WordsElementState();
}
class WordsElementState extends State<WordsElement> {

  buildTransList() {
    List<Widget> transList = [];
    if (widget.dataForm["trans"] != null && widget.dataForm["trans"] != '' && widget.dataForm["trans"] != 'null') {
      var transDatas = json.decode(widget.dataForm["trans"]);
      for(var item in transDatas) {
        transList.add(
            Container(
                alignment: Alignment.bottomLeft,
                child: Text.rich(
                    TextSpan(
                        children: [
                          TextSpan(text: item["pos"] != null ? item["pos"].toString() : '',style: const TextStyle(color: Colors.black54,fontSize: 16)),
                          const TextSpan(text: '. ',style: TextStyle(color: Colors.black54,fontSize: 16)),
                          TextSpan(text: item["tranCn"] != null ? item["tranCn"].toString() : '',style: const TextStyle(color: Colors.black54,fontSize: 16)),
                          const TextSpan(text: ' ',style: TextStyle(color: Colors.black54,fontSize: 16)),
                        ]
                    )
                )
            )
        );
      }
    }
    return transList;
  }


  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment:Alignment.center , /// 指定对齐方式为居中
      children: <Widget>[          /// 子组件列表
        Positioned(                /// 不指定任何参数时则放在Stack对齐方式指定的位置
          child: InkWell(
              onTap: (){ widget.onPressed(); },
              onDoubleTap: (){ widget.doublePressed(); },
              onLongPress: (){ widget.longPressed(); },
              child: Container(
                  padding: const EdgeInsets.fromLTRB(8, 8, 8, 8),
                  decoration: const BoxDecoration(
                    border:  Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) ),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                          flex: 3,
                          child: Container(
                              alignment: Alignment.bottomLeft,
                              child: Text.rich(
                                  TextSpan(
                                      children: [
                                        TextSpan(text: widget.dataForm["name"] != null ? widget.dataForm["name"].toString() : '',style: const TextStyle(color: Colors.black,fontSize: 18)),
                                      ]
                                  )
                              )
                          )
                      ),
                      Expanded(
                          flex: 4,
                          child: Container(
                              alignment: Alignment.bottomLeft,
                              child: Column(
                                children: [
                                  Container(
                                      alignment: Alignment.bottomLeft,
                                      child:
                                          Row(
                                              children: [
                                                const Text('美 ',style: TextStyle(color: Colors.black54,fontSize: 16)),
                                                widget.dataForm["usphone"] != null ?Player(
                                                    text: widget.dataForm["usphone"],
                                                    src: 'https://dict.youdao.com/dictvoice?audio=' + widget.dataForm["usspeech"],
                                                    color: Colors.blueGrey,
                                                    autoplay: false
                                                ):const SizedBox(),
                                                ]
                                          )
                                  ),
                                  const SizedBox(height: 5,),
                                  Container(
                                      alignment: Alignment.bottomLeft,
                                      child:
                                        Row(
                                            children: [
                                              const Text('英 ',style: TextStyle(color: Colors.black54,fontSize: 16)),
                                              widget.dataForm["ukphone"] != null ?Player(
                                                  text: widget.dataForm["ukphone"],
                                                  src: 'https://dict.youdao.com/dictvoice?audio=' + widget.dataForm["ukspeech"],
                                                  color: Colors.blueGrey,
                                                  autoplay: false
                                              ):const SizedBox(),
                                            ]
                                        )
                                  )
                                ]
                              )
                          )
                      ),
                      Expanded(
                          flex: 3,
                          child: Container(
                              alignment: Alignment.bottomLeft,
                              child: Column(
                                children: buildTransList(),
                              )
                          )
                      ),
                    ],
                  )
                  // Column(
                  //     children: [
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "近义词",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "Syno",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["syno"] != null ? widget.dataForm["syno"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "同根词",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "RelWord",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["relWord"] != null ? widget.dataForm["relWord"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "例句",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "Sentence",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["sentence"] != null ? widget.dataForm["sentence"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "短语",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "Phrase",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["phrase"] != null ? widget.dataForm["phrase"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "相关测试",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "Exam",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["exam"] != null ? widget.dataForm["exam"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "所属词典",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "Belong",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["belong"] != null ? widget.dataForm["belong"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "记忆次数",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "CheckTimes",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["checkTimes"] != null ? widget.dataForm["checkTimes"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "错误次数",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "ErrorTimes",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["errorTimes"] != null ? widget.dataForm["errorTimes"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "助记词",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "HelpText",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["helpText"] != null ? widget.dataForm["helpText"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //       Container(
                  //           padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                  //           child: Row(
                  //             children: [
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "助音词",style: TextStyle(color: Colors.black87,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: "SoundText",style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //               Expanded(
                  //                   flex: 1,
                  //                   child: Container(
                  //                       alignment: Alignment.bottomLeft,
                  //                       child: Text.rich(
                  //                           TextSpan(
                  //                               children: [
                  //                                 TextSpan(text: widget.dataForm["soundText"] != null ? widget.dataForm["soundText"].toString() : '',style: TextStyle(color: Colors.black54,fontSize: 12)),
                  //                               ]
                  //                           )
                  //                       )
                  //                   )
                  //               ),
                  //             ],
                  //           )
                  //       ),
                  //     ]
                  // )
              )
          ),
        ),
        /// Positioned(
        /// right: 15,
        /// top: 0,
        /// child: Container(
        /// child: Text(""),
        /// decoration: BoxDecoration(
        /// borderRadius: BorderRadius.only(
        /// bottomLeft: Radius.circular(5.0),
        /// bottomRight: Radius.circular(5.0)
        /// ),
        /// ),
        /// padding: EdgeInsets.fromLTRB(3, 2, 3, 4),
        /// ),
        /// ),
      ],
    );
  }

}

